HTML学习资料

撰写时间： 2019-09-11 总共： 7723 字 转载请注明： BY-SA 4.0（除特别声明或转载文章外）

HTML

更多资料请看：

菜鸟驿站

w3cschool

基本结构

<!--
	文档声明
	指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

全局属性

带*则基本所以主流都不支持

# 规定激活元素的快捷键(元素获得焦点)
accesskey = "String"
<!-- 支持：<a>,<area>,<button>,<input>,<label>,<legend>,<textarea> -->

# 规定元素的类名
class = "String"
<!-- 不支持：<base>,<head>,<html>,<meta>,<param>,<script>,<style>,<title> -->

# 指定元素的唯一标识
id
文档中的唯一标识

# 指定元素的内联样式
style = "多个css属性的分号隔开"

# 指定元素的额外信息
title 
常与 form 以及 a 元素一同使用,提供关于输入格式和链接目标的信息(鼠标移入可出现)
是 <abbr>,<acronym> 必需属性。

# 规定元素能否编辑(在页面里可以进行文本的修改)
contenteditable = "boolean"

#* 规定元素的上下文菜单
contextmenu= "对应id" 
右键元素打开菜单
指定id 
<menu id="menu">

# 指定元素的自定义数据 
data-* ="String"
属性名不应该包含任何大写字母,"data-"之后必须有至少一个字符
属性值可以是任意字符串
比如在time里指定data-time="..."
可以被js使用

# 指定文本渲染方向
dir = "ltr|rtl"
ltr:左->右
rtl:右->左
<!-- 不支持：<base>,<br>,<frame>,<frameset>,<hr>,<iframe>,<param>,<script> -->

# 指定元素能否被拖动
draggable = "true|false|auto"
链接和图像默认true

#* 指定拖动数据时是否进行复制、移动或链接
dropzone = "copy|move|link"

# 指定元素的隐藏
hidden
<e hidden/>

# 指示元素内容的语言
lang = "en|..."
en = 英语
zh = 中文
用于<html lang="en...">

# 对元素内容进行拼写语法检查
 spellcheck = "true|false"
多用于对input等输入区域进行检查

# 指定元素的tab键控制顺序
tabindex="number(1...)"
支持：<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

#* 指定是否翻译元素内容
translate="yes|no"

常用标签

基本结构标签

定义HTML文档
<html></html>

定义文档头部,可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等
<head></head> 

定义文档标题,head的必备元素
<title></title>

定义文档主体
<body></body>

定义标题
<h1,2,3,4,5,6></h1,2,3,4,5,6>

定义段落
<p></p>

定义分割线
<hr/>

文本格式标签

代码块常用,标识引用块
拥有自己的空间
<blockquote></blockquote>

常见应用就是用来表示计算机的源代码
保留换行等
<per></per>

计算机代码文本
<code></code>

被删除文本
<del></del>

斜体
<i></i>

突出显示文本
<mark></mark>

粗体
<strong></strong>

小号文本
<small></small>

上标
<sup></sup>

下标
<sub></sub>

进度条 指定 max="最大任务进程" value="当前任务进程"
<progress></progress>

注音（拼音等）
<ruby>
  博<rp>(</rp><rt>bo</rt><rp>)</rp>
  客<rp>(</rp><rt>ke</rt><rp>)</rp>
</ruby>

输入

表单
<form action="" method="" name=""></form>
标注
<label for="input_id"></label>

输入框
<input type=""  id="" placeholder="" required="" name="" pattern="正则"/>

多行文本框
<textarea></textarea>

下拉列表
<select></select>

下拉列表选项
<option value="" ></option>

选项组(包含一组有关系的选项)
<optgroup lable="" ></optgroup>

按钮
<button></button>

链接
<a href="" ></a>

媒体对象

图片
<img src="" alt=""/>

音频
<audio src="" autoplay controls ></audio>

视频
<video src="" controls="" ></video>

标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源
<source src="" type=""> 

外部媒体引用
内联框架
<iframe src="" scolling="yes|no|auto" frameborder="1|0"></iframe>

绘制
<canvas></canvas>

内容样式

页眉
<header></header>

导航
<nav></nav>

列表
无序列表
<ul>
    <li></li>
</ul>
有序列表
<ol>
    <li></li>
</ol>
自定义列表
<dl>
    <dt>项</dt>
    <dd>项描述1</dd>
    <dd>项描述2</dd>
    <dt>项</dt>
    <dd>...</dd>
</dl>


主体
<main></main>
在一个文档中，不能出现一个以上的main元素,
不能是article,aside,footer,,header,nav的子节点

节部分
<section></section>

表示文章
<article></article>

表示文章内容之外
<aside></aside>

块
<div></div>

内联
<span></span>

表格
<table>
    表头
  <thead>
    <tr>
      <th>表头标题1</th>
      <th>...2</th>
    </tr>
  </thead>
    表格主体
  <tbody>
    <tr>表示一行
      <td>表示行内一格</td>
      <td>..</td>
    </tr>
    <tr>
      <td>..</td>
      <td>..</td>
    </tr>
  </tbody>
    表尾
  <tfoot>
    <tr>
      <td>..</td>
      <td>..</td>
    </tr>
  </tfoot>
</table>

页脚
<footer></footer>

元信息

文档信息
<head>
   <meta charset="UTF-8"> 可选
   <title>必须元素title</title>
</head>

提供有关页面的元信息(meta-information)

指定编码
<meta charset="">

把 content 属性关联到一个名称
<meta name="" content="">
name=[
	application-name(表示web应用名称)
	|author(作者)
	|description(网页描述)
	|generator(什么东西生成的网页)
	|keywords(网页关键字)
]

把 content 属性关联到 HTTP 头部
使用带有 http-equiv 属性的meta标签时,
服务器将把名称/值对添加到发送给浏览器的内容头部
<meta http-equiv="指定加入到http头部的键" content="指定对应的值">
http-equiv=[
	content-type
	|refresh
	|set-cookie
	|default-style
]

网页对于不同设备的设置
<meta name="viewport" content="一些键值设置">
设置：
高度(指定像素,设备高度)
height = [pixel_value | device-height] ,
宽度(指定像素,设备宽度)
width = [pixel_value | device-width ] ,
设置网页加载时以什么比例加载
initial-scale = float_value ,
最小缩放比例
minimum-scale = float_value ,
最大缩放比例
maximum-scale = float_value ,
禁用用户触屏缩放
user-scalable = [yes | no] ,
设置dpi(适用android)
Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度
device-dpi：
	使用设备原本的 dpi 作为目标 dp,不会发生默认缩放
high-dpi:
	使用hdpi 作为目标 dpi,中等像素密度和低像素密度设备相应缩小
medium-dpi:
	使用mdpi作为目标 dpi,高像素密度设备相应放大,像素密度设备相应缩小
low-dpi:
	使用mdpi作为目标 dpi,中等像素密度和高像素密度设备相应放大
指定一个具体的dpi 值作为target dpi.这个值的范围必须在70–400之间

target-densitydpi = [
	dpi_value 
	| device-dpi 
	| high-dpi 
	| medium-dpi 
	| low-dpi
]

	<!-- 页面编码 -->
    <meta charset="UTF-8">
	<!-- 适用其他设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--
	X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页
	模式：Edge模式告诉 IE 以最高级模式渲染文档	
	-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- 页面关键字 -->
	<meta name="keywords" content="HTML,CSS,Java,SQL">
	<!-- 30s刷新一次 -->
	<meta http-equiv="refresh" content="30">

设置页面链接基准链接

<head>
    设置页面上的所有的相对链接规定默认 URL 或默认目标。
    在一个文档中，最多能使用一个base元素。
    必须位于 head 元素内部
    必须具备 href 属性或者 target 属性或者两个属性都具备
    将影响所以的相对链接包括 a,link,img,form等
    <base href="一个基准的URL" target="">
    
</head>
target:
_self(默认)：在相同框架打开
_blank:：新窗口打开
_parent：在父框架打开（如果没有父框架跟_self等效）
_top：在整个窗口打开（清除原本所以框架，载入浏览器窗口）
framename：在指定的框架打开

设置页面的引用资源文件

<head>
    rel属性必需,定义当前文档与被链接文档之间的关系.
    href属性必需,指向引用的资源
    type,指明文件的类型
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="textname.css">
    引入js脚本,src属性存在那么该标签不能存在内容
    <script type="text/javascript" src="/public/js/vendor/modernizr-3.3.1.min.js"></script>
    
</head>

部分rel属性：

常用：
rel="shortcut icon" 小图标
rel="stylesheet" 表明是样式文件
其他：
lternate -- 定义交替出现的链接 
Start -- 通知搜索引擎,文档的开始 
Next -- 记录文档的下一页.(浏览器可以提前加载此页) 
Prev -- 记录文档的上一页.(定义浏览器的后退键) 
Contents 
Index -- 当前文档的索引 
Glossary -- 词汇 
Copyright -- 当前文档的版权 
Chapter -- 当前文档的章节 
Section -- 作为文档的一部分 
Subsection -- 作为文档的一小部分 
Appendix -- 定义文档的附加信息 
Help -- 链接帮助信息 
Bookmark -- 书签

样式和脚本

<head>
    <style>
        在这里写样式
    </style>
    <script>
        在这里写脚本
    </script>
</head>
<body>
  <noscript>Your browser does not support JavaScript!</noscript>
  <script type="text/javascript">
    document.write("Hello World!")
  </script>
</body>

常用函数

窗口事件

<body>:

// 当窗口失去焦点
onblur()

// 当窗口获得焦点
onfocus()

// 文档加载时
onload()

// 当窗口大小调整时
onresize()

// 当离开文档
onunload()

表单事件

<form>:

// 当元素改变时
onchange()

// 当表单改变时
onformchange()

// 当元素获得用户输入时
oninput()

// 当选取元素时
onselect()

// 当提交表单时
onsubmit()

键盘鼠标事件

// 单击鼠标
onclick()

// 双击鼠标
ondbclick()

// 鼠标移入，移出
onmouseover(),onmouseout()

// 鼠标移动时
onmousemove()

// 当拖动元素时
ondrag()

// 拖动开始,结束
ondragstart(),ondragend()

// 拖动指定到目标区域,到达上方,离开
ondragenter(),ondragover(),ondragleave()

// 当滚动元素时
onscroll()

// 键盘按键按下,松开
onkeydown(),onkeyup()

多媒体事件

<img> <video> <audio>:

// 当发生中止事件
onabort()

// 当媒体可以播放,但需要缓冲
oncanplay()

// 当媒体可以播放且不需要缓冲
oncanplaythrough()

// 当媒体长度改变时
ondurationchange()

// 当媒体到结尾时
onended()

// 当加载错误时
onerror()

// 当加载媒介时(可加载媒体)
onloadeddata()

// 可获得媒体元数据时
onloadedmetadata()

// 暂停,播放,正在播放,改变播放速率,
onpause(),onplay(),onplaying(),onratechange()

结语

以上包含了基本的标签跟一个html文档构建需要的标签跟标签的基本使用。建议结合语义化使用。尽量让文档内容的意义能根据标签表达出来。

包括一些html常用事件，以备使用。

奖励一下